<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const p1 = new Promise((resolve, reject) => {
            try {
                console.log("开始请求A.....")
                // throw new Error("网络出现问题!!!!")
                setTimeout(() => {
                    console.log("数据请求成功");
                    resolve({
                        token: "hskahdoqwhdlkash"
                    })
                }, 2000)
            } catch (e) {
                reject(e.message)
            }
        })

        const p2 = p1.then((value)=>{
            console.log("A数据已搞到手",value);
            //继续下一步的数据请求
            // throw new Error("B错误")//改变then的状态
            const next = new Promise((resolve,reject)=>{
                console.log("开始请求B数据");
                try{
                    setTimeout(()=>{
                        console.log("B数据请求成功");
                        // resolve("B成功")//不改变then的状态
                        reject("B失败")//不改变then的状态
                    },2000)
                }catch(e){
                    reject(e.message)
                }
            })

            return next//返回失败的promise实例会改变then的状态
            
        })

        const p3 = p2.then((value)=>{
            console.log(value);
        })

        const p4 = p2.then()

        console.log("p2",p2);//fulfilled B成功
        console.log("p3",p3);//fulfilled undefined
        console.log("p4",p4);//pending undefined 直接被穿透
        

        /*
        then方法的总结:
        基础概念:
            -Promise原型方法then:
            -Promise的回调函数是同步的
            -then方法的绑定是同步的,实参回调函数是异步的
            -then接受两个回调参数作为实参,第一个处理成功状态Promise实例的逻辑,第二个处理失败状态的Promise的实例
            -then的实参回调函数的实参可以接收到调用then方法的Promise实例的返回值
                -底层逻辑:在Promise的原型上的封装then方法时,通过对promise实例的判断,取到状态对应的值并通过回调函数的实参返回
                Promise.prototype.then = function(callback1,callback2){
                    if(p1.PromiseState === "fulfilled"){
                        callback1(p1.PromiseResult)
                    }else if(p1.PromiseState === "rejected"){
                        callback2(p1.PromiseResult)
                    }
                }

        返回值:
           -需等到调用then方法的promise实例的状态改变了才能触发,一般处理成功的逻辑
           -默认返回成功状态的Promise实例,值为其回调函数的返回值
            当其回调返回的是promise实例时,then的返回结果与这个promise实例保持一致
           -当then的回调函数内,promise实例外有报错单没被处理时,则then直接返回失败的promise实例,值为错误信息
           -当then中没有处理当前promise实例状态的回调函数时,直接被穿透
        
        catch与then一致,只是catch是处理失败的promise实例的
           */
    </script>
</body>

</html>